<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./common.css">
    <script src="https://cdn.jsdelivr.net/npm/gsap@latest"></script>
    <script src="./js/jq.js"></script>
</head>

<body>
    <div class="main pos_r">
        <div class="logo pos_r">
            <img src="./static/image/logo.png" alt="">
        </div>
        <div class="left pos_a"></div>
        <div class="right pos_a"></div>
        <div class="main2 pos_r" style="display: none;">
            <img src="./static/image/fight.png" alt="">
            <div class="title">
                Easy and fast <br>
                flight booking
            </div>
            <div class="desc">
                With Firefly, you can book your ideal <br>
                flight in just a few steps.
            </div>
            <div class="cloud">
                <img src="./static/image/cloud-8120.png" alt="">
            </div>
            <div class="btn"><a href="./start.html">NEXT STEP</a></div>
        </div>
    </div>

</body>
<script>
    $(function () {
        setTimeout(() => {
            $('.main2').show()
        }, 2000);
    })
    gsap.fromTo(".logo img", {
        y: 0
    }, {
        duration: 2,
        y: 100,
        opacity: 0,
    });
    gsap.fromTo(".right", {
        duration: 2,
        y: 100,
    }, {
        duration: 2,
        opacity: 0,
    });
    gsap.fromTo(".left", {
        duration: 2,
        y: 140,
    }, {
        duration: 2,
        opacity: 0,
    });


</script>
<style>
    body {
        background-color: #fff;
    }

    .main2 {
        text-align: center;
        height: 100%;
    }

    .main2 img {
        width: 100%;
        height: 324px;
        margin-top: 40px;
    }

    .left {
        border-radius: 282px;
        background: #FFB906;
        filter: blur(40px);
        width: 276px;
        height: 282px;
        left: -120px;
        bottom: -140px;
    }

    .right {
        width: 428px;
        height: 421px;
        border-radius: 428px;
        background: #FF8906;
        filter: blur(50px);
        right: -210px;
        bottom: -100px;
    }

    .main {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        box-sizing: border-box;
    }

    .logo {
        width: 100%;
        text-align: center;
    }

    .logo img {
        width: 222px;
        height: 99px;
        position: absolute;
        top: 0;
        left: 20%;
    }

    .title {
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
    }

    .desc {
        font-size: 15px;
        font-style: normal;
        font-weight: 300;
        margin-top: 20px;
    }

    .cloud {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 350px;
    }

    .btn {
        color: #000;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        width: 80vw;
        height: 51px;
        line-height: 51px;
        border-radius: 13px;
        background: #FDA84A;
        position: absolute;
        bottom: 100px;
        left: 10vw;
    }
</style>


</html>